<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Business Bootstrap Responsive Template</title>
    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- Global Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/animate/animate.min.css">
    <link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- Core Stylesheets -->
    <link rel="stylesheet" href="css/project.css"> 
  </head>

  <body id="page-top">

<!--====================================================
                         HEADER
======================================================--> 

    <header>

      <!-- Top Navbar  -->
      <div class="top-menubar">
        <div class="topmenu">
          <div class="container">
            <div class="row">
              <div class="col-md-7">
                <ul class="list-inline top-contacts">
                  <li>
                    <i class="fa fa-envelope"></i> Email: <a href="mailto:info@themeborn.com"><b>info@themeborn.com</b></a>
                  </li>
                  <li>
                    <i class="fa fa-phone"></i> 热线电话: <b>(+1) 111 222 33</b>
                  </li>
                </ul>
              </div> 
              <div class="col-md-5">
                <ul class="list-inline top-data">
                  <li><a href="#" target="_empty"><i class="fa top-social fa-facebook"></i></a></li>
                  <li><a href="#" target="_empty"><i class="fa top-social fa-twitter"></i></a></li>
                  <li><a href="#" target="_empty"><i class="fa top-social fa-google-plus"></i></a></li> 
                  <li><a href="#" class="log-top" data-toggle="modal" data-target="#login-modal">Login</a></li>  
                </ul>
              </div>
            </div>
          </div>
        </div> 
      </div>  
      
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-light" id="mainNav" data-toggle="affix">
        <div class="container">
          <a class="navbar-brand smooth-scroll" href="index.html">
           <img src="img/logo-s.png" alt="logo" style="width:111px;height: 35px;">
          </a> 
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
                <span class="navbar-toggler-icon"></span>
          </button>  
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item" ><a class="nav-link smooth-scroll" href="index.html">Home</a></li>
                <li class="nav-item dropdown" >
                  <a class="nav-link dropdown-toggle smooth-scroll" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a> 
                  <div class="dropdown-menu dropdown-cust" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="about.html">关于我们</a>
                    <a class="dropdown-item" href="careers.html">Career Oprtunity</a>
                    <a class="dropdown-item" href="team.html">Meet Our Team</a>
                    <a class="dropdown-item" href="faq.html">FAQ</a>
                    <a class="dropdown-item" href="testimonials.html">Testimonials</a>
                  </div>
                </li>
                <li class="nav-item" ><a class="nav-link smooth-scroll" href="services.html">Services</a></li> 
                <li class="nav-item dropdown" >
                  <a class="nav-link dropdown-toggle smooth-scroll" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin Panel</a> 
                  <div class="dropdown-menu dropdown-cust" aria-labelledby="navbarDropdownMenuLink"> 
                    <a class="dropdown-item"  target="_empty" href="admin/index.html">Dashboard</a> 
                    <a class="dropdown-item"  target="_empty" href="admin/chart.html">Charts</a> 
                    <a class="dropdown-item"  target="_empty" href="admin/email.html">Email</a> 
                    <a class="dropdown-item"  target="_empty" href="admin/faq.html">FAQ</a> 
                    <a class="dropdown-item"  target="_empty" href="admin/profile.html">Profile</a> 
                    <a class="dropdown-item"  target="_empty" href="admin/tables.html">Tables</a> 
                    <a class="dropdown-item"  target="_empty" href="admin/invoice.html">Invoice</a> 
                  </div>
                </li>
                <li class="nav-item dropdown" >
                  <a class="nav-link dropdown-toggle smooth-scroll" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a> 
                  <div class="dropdown-menu dropdown-cust" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="news-list.html">News list layouts</a>
                    <a class="dropdown-item" href="news-grid.html">News grid layouts</a>
                    <a class="dropdown-item" href="news-details.html">News Details</a> 
                    <a class="dropdown-item active" href="project.html">Project</a>
                    <a class="dropdown-item" href="contact.html">Contact Us</a>
                    <a class="dropdown-item" href="comming-soon.html">Comming Soon</a>
                    <a class="dropdown-item" href="pricing.html">Pricing Tables</a>
                    <a class="dropdown-item" href="admin/404.html">404</a>
                  </div>
                </li>
                <li class="nav-item dropdown" >
                  <a class="nav-link dropdown-toggle smooth-scroll" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop</a> 
                  <div class="dropdown-menu dropdown-cust mega-menu" aria-labelledby="navbarDropdownMenuLink">
                    <div class="row">
                      <div class="col-md-5">
                        <a class="dropdown-item" href="shop.html">Shop Detail</a>
                        <a class="dropdown-item" href="single-product.html">Single Product</a>
                        <a class="dropdown-item" href="cart.html">Cart</a>
                        <a class="dropdown-item" href="checkout.html">Checkout</a>
                        <a class="dropdown-item" href="myaccount.html">Myaccount</a>
                      </div>
                      <div class="col-md-7 mega-menu-img m-auto text-center pl-0">
                        <a href="#"><img src="img/offer_icon.png" alt="" class="img-fluid"></a>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <i class="search fa fa-search search-btn"></i>
                  <div class="search-open">
                    <div class="input-group animated fadeInUp">
                      <input type="text" class="form-control" placeholder="Search" aria-describedby="basic-addon2">
                      <span class="input-group-addon" id="basic-addon2">Go</span>
                    </div>
                  </div>
                </li> 
                <li>
                  <div class="top-menubar-nav">
                    <div class="topmenu ">
                      <div class="container">
                        <div class="row">
                          <div class="col-md-9">
                            <ul class="list-inline top-contacts">
                              <li>
                                <i class="fa fa-envelope"></i> Email: <a href="mailto:info@htmlstream.com">info@htmlstream.com</a>
                              </li>
                              <li>
                                <i class="fa fa-phone"></i> 热线电话: (1) 396 4587 99
                              </li>
                            </ul>
                          </div> 
                          <div class="col-md-3">
                            <ul class="list-inline top-data">
                              <li><a href="#" target="_empty"><i class="fa top-social fa-facebook"></i></a></li>
                              <li><a href="#" target="_empty"><i class="fa top-social fa-twitter"></i></a></li>
                              <li><a href="#" target="_empty"><i class="fa top-social fa-google-plus"></i></a></li> 
                              <li><a href="#" class="log-top" data-toggle="modal" data-target="#login-modal">Login</a></li>  
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div> 
                  </div>
                </li>
            </ul>  
          </div>
        </div>
      </nav>
    </header> 

<!--====================================================
                    LOGIN OR REGISTER
======================================================-->
    <section id="login">
      <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header" align="center">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span class="fa fa-times" aria-hidden="true"></span>
                      </button>
                  </div>
                  <div id="div-forms">
                      <form id="login-form">
                          <h3 class="text-center">Login</h3>
                          <div class="modal-body">
                              <label for="username">Username</label> 
                              <input id="login_username" class="form-control" type="text" placeholder="Enter username " required>
                              <label for="username">Password</label> 
                              <input id="login_password" class="form-control" type="password" placeholder="Enter password" required>
                              <div class="checkbox">
                                  <label>
                                      <input type="checkbox"> Remember me
                                  </label>
                              </div>
                          </div>
                          <div class="modal-footer text-center">
                              <div>
                                  <button type="submit" class="btn btn-general btn-white">Login</button>
                              </div>
                              <div>
                                  <button id="login_register_btn" type="button" class="btn btn-link">Register</button>
                              </div>
                          </div>
                      </form>
                      <form id="register-form" style="display:none;">
                          <h3 class="text-center">Register</h3>
                          <div class="modal-body"> 
                              <label for="username">Username</label> 
                              <input id="register_username" class="form-control" type="text" placeholder="Enter username" required>
                              <label for="register_email">E-mailId</label> 
                              <input id="register_email" class="form-control" type="text" placeholder="Enter eMail" required>
                              <label for="register_password">Password</label> 
                              <input id="register_password" class="form-control" type="password" placeholder="Password" required>
                          </div>
                          <div class="modal-footer">
                              <div>
                                  <button type="submit" class="btn btn-general btn-white">Register</button>
                              </div>
                              <div>
                                  <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
                              </div>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
      </div>
    </section>      
 
<!--====================================================
                       HOME-P
======================================================-->
    <div id="home-p" class="home-p pages-head2 text-center">
      <div class="container">
        <h1 class="wow fadeInUp" data-wow-delay="0.1s"> Innovation Project</h1>
        <p>New Idea</p>
      </div><!--/end container-->
    </div> 

<!--====================================================
                        PROJECT-P1
======================================================--> 
    <section id="project-p1" class="project-p1">
      <div class="container-fluid">
        <div class="  row">
              <div class="col-md-3 col-sm-6 col-xs-12 bg-matisse">
              <div class="project-p1-cont wow fadeInUp  text-center" data-wow-delay="0.3s">
                <i class="fa fa-line-chart fa-2x"></i>
                <p>It is a long established fact</p>
              </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 bg-chathams">
              <div class="project-p1-cont wow fadeInUp  text-center" data-wow-delay="0.6s">
                <i class="fa fa-leaf fa-2x"></i>
                <p>It is a long established fact</p>
              </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 bg-atlis">
              <div class="project-p1-cont wow fadeInUp  text-center" data-wow-delay="0.9s">
                <i class="fa fa-soccer-ball-o fa-2x"></i>
                <p>It is a long established fact</p>
              </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12 bg-starship">
              <div class="project-p1-cont wow fadeInUp  text-center" data-wow-delay="1.2s">
                <i class="fa fa-ticket fa-2x"></i>
                <p>It is a long established fact</p>
              </div>
            </div>
        </div>
      </div>
    </section>

<!--====================================================
                        PROJECT-P2
======================================================--> 
    <section id="project-p2" class="project-p2" style="background: #a4cff1;">
      <div class="container-fluid">
        <div class="row"> 
            <div class="col-md-6">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc wow fadeInUp" data-wow-delay="0.3s">
                    <h4>A Scalable Platform for new business High Performance solution </h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-4.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-6">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc wow fadeInUp" data-wow-delay="0.6s">
                    <h4>Automatic blade swinging ceiling fan for easy cleaning with new technology</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-7.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-12">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc wow fadeInUp" data-wow-delay="0.3s">
                    <h4>Automation Step-lock system in bus control with iphone and android app</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-3.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-6">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc">
                    <h4>Light/ sound alert that informs user when the landline phone becomes dead</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-1.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-6">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc">
                    <h4>Reminding the owner if keys are forgotten in the vehicle with application</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-5.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-6">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc">
                    <h4>Water purifier in rural area</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-6.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-6">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc">
                    <h4>Sensor to correct body posture /regulate viewing distance</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-2.jpg" class="img-fluid" alt="...">
              </div>
            </div>
            <div class="col-md-12">
              <div class="project-p2-cont">
                <div class="col-md-5 col-sm-6">
                  <div class="project-p2-desc">
                    <h4>Retractable spikes before the zebra crossing that come out when the traffic</h4>
                    <a href="#" class="text-right"><i class="fa fa-arrow-circle-o-right"></i> 查看详情</a>
                  </div>
                </div>
                <img src="img/project/pro-8.jpg" class="img-fluid" alt="...">
              </div>
            </div>
          </div> 
      </div>
    </section>
 
<!--====================================================
                       NEWS
======================================================-->
    <section id="comp-offer">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3 col-sm-6  desc-comp-offer wow fadeInUp" data-wow-delay="0.2s">
            <h2>最新消息</h2>
            <div class="heading-border-light"></div> 
            <button class="btn btn-general btn-green" role="button">查看详情</button>
          </div>
          <div class="col-md-3 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.4s">
            <div class="desc-comp-offer-cont">
              <div class="thumbnail-blogs">
                  <div class="caption">
                    <i class="fa fa-chain"></i>
                  </div>
                  <img src="img/news/news-1.jpg" class="img-fluid" alt="...">
              </div>
              <h3>Pricing Strategies for Product</h3>
              <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from Business box. </p>
              <a href="#"><i class="fa fa-arrow-circle-o-right"></i> Learn More</a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.6s">
            <div class="desc-comp-offer-cont">
              <div class="thumbnail-blogs">
                  <div class="caption">
                    <i class="fa fa-chain"></i>
                  </div>
                  <img src="img/news/news-9.jpg" class="img-fluid" alt="...">
              </div>
              <h3>Design Exhibitions of 2017</h3>
              <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from Business box. </p>
              <a href="#"><i class="fa fa-arrow-circle-o-right"></i> Learn More</a>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 desc-comp-offer wow fadeInUp" data-wow-delay="0.8s">
            <div class="desc-comp-offer-cont">
              <div class="thumbnail-blogs">
                  <div class="caption">
                    <i class="fa fa-chain"></i>
                  </div>
                  <img src="img/news/news-12.jpeg" class="img-fluid" alt="...">
              </div>
              <h3>Exciting New Technologies</h3>
              <p class="desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from Business box. </p>
              <a href="#"><i class="fa fa-arrow-circle-o-right"></i> Learn More</a>
            </div>
          </div>
        </div>
      </div>
    </section>

<!--====================================================
                      FOOTER
======================================================--> 
    <footer> 
        <div id="footer-s1" class="footer-s1">
          <div class="footer">
            <div class="container">
              <div class="row">
                <!-- 关于我们 -->
                <div class="col-md-3 col-sm-6 ">
                  <div><img src="img/logo-w.png" alt="" class="img-fluid"></div>
                  <ul class="list-unstyled comp-desc-f">
                     <li><p>Businessbox is a corporate business theme. You can customize what ever you think to make your website much better from your great ideas. </p></li> 
                  </ul><br> 
                </div>
                <!-- End 关于我们 -->

                <!-- Recent News -->
                <div class="col-md-3 col-sm-6 ">
                  <div class="heading-footer"><h2>Useful Links</h2></div>
                  <ul class="list-unstyled link-list">
                    <li><a href="about.html">关于我们</a><i class="fa fa-angle-right"></i></li> 
                    <li><a href="project.html">Project</a><i class="fa fa-angle-right"></i></li> 
                    <li><a href="careers.html">Career</a><i class="fa fa-angle-right"></i></li> 
                    <li><a href="faq.html">FAQ</a><i class="fa fa-angle-right"></i></li> 
                    <li><a href="contact.html">Contact us</a><i class="fa fa-angle-right"></i></li> 
                  </ul>
                </div>
                <!-- End Recent list -->

                <!-- Recent Blog Entries -->
                <div class="col-md-3 col-sm-6 ">
                  <div class="heading-footer"><h2>Recent Post Entries</h2></div>
                  <ul class="list-unstyled thumb-list">
                    <li>
                      <div class="overflow-h">
                        <a href="#">Praesent ut consectetur diam.</a>
                        <small>02 OCT, 2017</small>
                      </div>
                    </li>
                    <li>
                      <div class="overflow-h">
                        <a href="#">Maecenas pharetra tellus et fringilla.</a>
                        <small>02 OCT, 2017</small>
                      </div>
                    </li>
                  </ul>
                </div>
                <!-- End Recent Blog Entries -->

                <!-- Latest Tweets -->
                <div class="col-md-3 col-sm-6">
                  <div class="heading-footer"><h2>联系方式</h2></div>
                  <address class="address-details-f">
                    浙江省杭州市上城区东宁路553号 <br>
                    Phone: +86 15268541858 <br>
                    Fax: 800 123 3456 <br>
                    Email: <a href="mailto:zhouxf0425@outlook.com" class="">zhouxf0425@outlook.com</a>
                  </address>  
                  <ul class="list-inline social-icon-f top-data">
                    <li><a href="#" target="_empty"><i class="fa top-social fa-facebook"></i></a></li>
                    <li><a href="#" target="_empty"><i class="fa top-social fa-twitter"></i></a></li>
                    <li><a href="#" target="_empty"><i class="fa top-social fa-google-plus"></i></a></li> 
                  </ul>
                </div>
                <!-- End Latest Tweets -->
              </div>
            </div><!--/container -->
          </div> 
        </div>

        <div id="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="footer-copyrights">
                            <p>Copyrights &copy; All Rights Reserved by Businessbox. <a target="_blank" href="http://www.mobanwang.com/" title="模板王">模板王</a></p>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
        <a href="#home-p" id="back-to-top" class="btn btn-sm btn-green btn-back-to-top smooth-scrolls hidden-sm hidden-xs" title="home" role="button">
            <i class="fa fa-angle-up"></i>
        </a>
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/popper/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/wow/wow.min.js"></script>
    <script src="js/owl-carousel/owl.carousel.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="js/jquery-easing/jquery.easing.min.js"></script> 
    
    <script src="js/custom.js"></script> 
  </body>
</html>
